<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>键盘移动老鼠</title>
		<style>
			#mouse {
				display: inline-block;
				cursor: pointer;
				margin: 0;
			}

			#mouse:focus {
				outline: 1px dashed black;
			}
		</style>
	</head>
	<body>
		<p>Click on the mouse and move it with arrow keys.</p>

		<pre id="mouse">
 _   _
(q\_/p)
 /. .\
=\_t_/=   __
 /   \   (
((   ))   )
/\) (/\  /
\  Y  /-'
 nn^nn
</pre
		>

		<script>
			// 给 mouse 添加可聚焦状态（则可以使用 focus 和 blur 事件）
			mouse.tabIndex = 0

			mouse.onfocus = function () {
				this.style.left = this.getBoundingClientRect().left + 'px'
				this.style.top = this.getBoundingClientRect().top + 'px'

				this.style.position = 'fixed'
			}

			mouse.onkeydown = function (e) {
				switch (e.key) {
					case 'ArrowLeft':
						this.style.left = parseInt(this.style.left) - this.offsetWidth + 'px'
						return false // 阻止浏览器默认行为（也阻止 switch 继续往下执行）
					case 'ArrowUp':
						this.style.top = parseInt(this.style.top) - this.offsetHeight + 'px'
						return false
					case 'ArrowRight':
						this.style.left = parseInt(this.style.left) + this.offsetWidth + 'px'
						return false
					case 'ArrowDown':
						this.style.top = parseInt(this.style.top) + this.offsetHeight + 'px'
						return false
				}
			}
		</script>
	</body>
</html>
